@charset "utf-8";
body {
    overflow: hidden;
}
.banner {
    /*height: 1080px;*/
    background: url('../img/product-banner-back.jpg') no-repeat center top;
    background-attachment: fixed;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
}

.banner .text {
    height: 1080px;
    background: url('../img/product-banner-text.png') no-repeat center;
}

.list .view {
    width: 1400px;
    height: 1100px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 71px;
}

.item-list .title {
    background-position: center;
    background-repeat: no-repeat;
}

.item-list ul {
    position: relative;
    top: 30px;
    opacity: 0;
}

.item-list.on ul {
    animation:productsOn 1s;
    animation-fill-mode: forwards;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.item-list1 .title {
    background-image: url('../img/item-list-title1.png');
    height: 135px;
}

.item-list2 .title {
    background-image: url('../img/item-list-title2.png');
    height: 115px;
}

.item-list3 .title {
    background-image: url('../img/item-list-title3.png');
    height: 120px;
}

.item-list li:first-child {
    margin-left: 0;
    margin-top: 0;
}

.item-list li:nth-of-type(2) {
    margin-top: 0;
}

.item-list li:nth-of-type(3) {
    margin-left: 0;
}

.item-list {
    position: absolute;
    transition: 1s background;
}

.item-list:hover {
    background: rgba(87, 87, 87, 0.7) none repeat scroll 0 0;
}

.item-list1 {
    background: rgba(119, 146, 56, 0.5) none repeat scroll 0 0;
    width: 673px;
    padding-bottom: 75px;
    left: 0;
    top: 0;
}

.item-list ul {
    margin-left: auto;
    margin-right: auto;
}

.item-list1 ul {
    width: 528px;
}

.item-list1 li {
    width: 213px;
    margin-left: 102px;
    margin-top: 80px;
}

.item-list2 {
    background: rgba(12, 106, 133, 0.5) none repeat scroll 0 0;
    width: 687px;
    padding-bottom: 43px;
    right: 0;
    top: 0;
}

.item-list2 ul {
    width: 512px;
}

.item-list2 li {
    width: 195px;
    margin-left: 122px;
}

.item-list3 {
    background: rgba(150, 62, 60, 0.5) none repeat scroll 0 0;
    width: 687px;
    padding-bottom: 45px;
    right: 0;
    top: 484px;
}

.item-list3 ul {
    width: 512px;
}

.item-list3 li {
    width: 195px;
    margin-left: 122px;
}

@keyframes productsOn {
    from {
        top: 30px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

@-moz-keyframes productsOn {
    from {
        top: 30px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

@-webkit-keyframes productsOn {
    from {
        top: 30px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}